<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
<title>第三次作业：注册界面</title>


<style>
.default {background: #eeeeee;}
.weak {background: #FF0000;}
.medium {background: #FF9900;}
.strong {background: #33CC00;}
input {height: 20px; line-height: 20px;width: 210px;}
span {display: inline-block;width: 70px;height: 30px;line-height: 30px;background: #ddd;text-align: center;margin: 4px 2px;}
body{background-color:orange;}
div{width:500px;height:500px;background:#efd2a0;margin:auto;}
h1{color:white;font-size:40pt;}
hr{color:navy;}
form{font-size:12pt;}
</style>


</head>
<body>
<div>
<h1 align="center"><strong>注册</strong></h1>
<hr>
<form style="text-align:center">
<input type="text" id="username" placeholder="请输入你的用户名"><br/>
<input type="password" id="password1" placeholder="请输入密码"><br/>
</form>
<p align="center">密码强度：<span>弱</span><span>中</span><span>强</span></p><br/>
<form style="text-align:center">
<input type="password" id="password2" placeholder="请重复密码"><br/>
<input type="email" id="usermail"placeholder="请输入正确的邮箱地址"><br/>
<input type="submit" id="register" value="注册" onclick="check()"><br/>
<input type="submit" value="返回登录界面" onclick="back()">
</form>
</div>
<script type="text/javascript">
	    var inputusername = document.getElementById('username');
        var USERNAME = inputusername.value;
        var emailId = document.getElementById('email');
        var email = emailId.value;
        var date = new Date();
        var currentTime = date.toLocaleString();
        var inputpwd1 = document.getElementById('password1');
        var inputpwd2 = document.getElementById("password2")；
        var inputpwd = pwd1.value;
//“注册”按钮触发的事件：密码是否相同的验证 用户名是否重复的验证
       function check() {

        if (!window.localStorage) {
            alert("浏览器不支持localstorage");
            return;
        } else {
            checkusername(); 
            checkpassword();
}
//两次密码是否相同的验证
     function checkpassword(){
 	if (inputpwd1 != inputpwd2) {
            alert("两次密码不一致,请重新输入！");
            return;
        }
//密码强度部分（来源于网络）
            var oInput = document.getElementById("password1");
            oInput.value = '';
            var spans = document.getElementsByTagName('span');

            oInput.onkeyup = function(){
                spans[0].className = spans[1].className = spans[2].className = "default";

                var pwd = this.value;
                var result = 0;
                for(var i = 0, len = pwd.length; i < len; ++i){
                    result |= charType(pwd.charCodeAt(i));
                }

                var level = 0;
                for(var i = 0; i <= 4; i++){
                    if(result & 1){
                        level ++;
                    }
                    result = result >>> 1;
                }

                if(pwd.length >= 6){
                    switch (level) {
                        case 1:
                            spans[0].className = "weak";
                            break;
                        case 2:
                            spans[0].className = "medium";
                            spans[1].className = "medium";
                            break;
                        case 3:
                        case 4:
                            spans[0].className = "strong";
                            spans[1].className = "strong";
                            spans[2].className = "strong";
                            break;
                    }
                }
            }
		}
        function charType(num){
            if(num >= 48 && num <= 57){
                return 1;
            }
            if (num >= 97 && num <= 122) {
                return 2;
            }
            if (num >= 65 && num <= 90) {
                return 4;
            }
            return 8;
        }
//用户名验重部分 （若无重复的用户名，则提交至storage）
    function checkusername(){    
    	var storage = window.localStorage;
        var Storageusername =  storage["username"];
        if (username == Storageusername) {
            alert("用户名已存在");
            return;}
            else{
        storage["username"] = USERNAME;
        storage["password"] = inputpwd;
        storage["email"] = email;
        storage["registertime"] = currentTime;
        alert("注册成功");
    }

         function back() {
        window.open("https://kowaji.gitee.io/no.3login");
    }

</script>
</body>
</html>